import type { IWidgetMeta } from '@/types/designer'

// 基础组件配置 - 按需加载
export const textWidgetMeta: IWidgetMeta = {
  type: 'text',
  name: '文本',
  icon: 'Document',
  category: '基础组件',
  description: '用于显示文本内容',
  defaultProps: {
    text: '文本内容',
    fontSize: 14,
    color: '#333333',
    fontWeight: 'normal',
    textAlign: 'left'
  },
  defaultStyle: {
    padding: '0px', // 将padding设为0
    margin: '0px',
    customCSS: '' // 添加自定义CSS属性
  },
  propSchema: [
    {
      key: 'name',
      label: '组件名称',
      type: 'string',
      defaultValue: '文本组件',
      required: true,
      description: '用于标识组件的名称'
    },
    {
      key: 'text',
      label: '文本内容',
      type: 'textarea',
      defaultValue: '文本内容',
      required: true
    },
    {
      key: 'fontSize',
      label: '字体大小',
      type: 'number',
      defaultValue: 14,
      required: false
    },
    {
      key: 'color',
      label: '字体颜色',
      type: 'color',
      defaultValue: '#333333',
      required: false
    },
    {
      key: 'fontWeight',
      label: '字体粗细',
      type: 'select',
      defaultValue: 'normal',
      options: [
        { label: '正常', value: 'normal' },
        { label: '粗体', value: 'bold' },
        { label: '细体', value: 'lighter' }
      ],
      required: false
    },
    {
      key: 'textAlign',
      label: '对齐方式',
      type: 'select',
      defaultValue: 'left',
      options: [
        { label: '左对齐', value: 'left' },
        { label: '居中', value: 'center' },
        { label: '右对齐', value: 'right' }
      ],
      required: false
    }
  ],
  styleSchema: [
    {
      key: 'padding',
      label: '内边距',
      type: 'string',
      defaultValue: '0px', // 将padding设为0
      unit: 'px'
    },
    {
      key: 'margin',
      label: '外边距',
      type: 'string',
      defaultValue: '0px',
      unit: 'px'
    },
    {
      key: 'backgroundColor',
      label: '背景颜色',
      type: 'color',
      defaultValue: 'transparent'
    }
  ]
}

// 按钮组件配置
export const buttonWidgetMeta: IWidgetMeta = {
  type: 'button',
  name: '按钮',
  icon: 'Pointer',
  category: '基础组件',
  description: '可点击的按钮组件',
  defaultProps: {
    text: '按钮',
    type: 'primary',
    size: 'default',
    disabled: false,
    round: false
  },
  defaultStyle: {
    margin: '0px',
    customCSS: '' // 添加自定义CSS属性
  },
  propSchema: [
    {
      key: 'name',
      label: '组件名称',
      type: 'string',
      defaultValue: '按钮组件',
      required: true,
      description: '用于标识组件的名称'
    },
    {
      key: 'text',
      label: '按钮文本',
      type: 'string',
      defaultValue: '按钮',
      required: true
    },
    {
      key: 'type',
      label: '按钮类型',
      type: 'select',
      defaultValue: 'primary',
      options: [
        { label: '主要', value: 'primary' },
        { label: '成功', value: 'success' },
        { label: '警告', value: 'warning' },
        { label: '危险', value: 'danger' },
        { label: '信息', value: 'info' }
      ],
      required: false
    },
    {
      key: 'size',
      label: '按钮尺寸',
      type: 'select',
      defaultValue: 'medium',
      options: [
        { label: '小', value: 'small' },
        { label: '中', value: 'medium' },
        { label: '大', value: 'large' }
      ],
      required: false
    },
    {
      key: 'disabled',
      label: '禁用状态',
      type: 'boolean',
      defaultValue: false,
      required: false
    },
    {
      key: 'round',
      label: '圆角按钮',
      type: 'boolean',
      defaultValue: false,
      required: false
    }
  ],
  styleSchema: [
    {
      key: 'margin',
      label: '外边距',
      type: 'string',
      defaultValue: '0px',
      unit: 'px'
    }
  ]
}

// 图片组件配置
export const imageWidgetMeta: IWidgetMeta = {
  type: 'image',
  name: '图片',
  icon: 'Picture',
  category: '媒体组件',
  description: '用于显示图片',
  defaultProps: {
    src: 'https://via.placeholder.com/300x200',
    alt: '图片描述',
    fit: 'cover'
  },
  defaultStyle: {
    width: '300px',
    height: '200px',
    customCSS: '' // 添加自定义CSS属性
  },
  propSchema: [
    {
      key: 'name',
      label: '组件名称',
      type: 'string',
      defaultValue: '图片组件',
      required: true,
      description: '用于标识组件的名称'
    },
    {
      key: 'src',
      label: '图片地址',
      type: 'string',
      defaultValue: 'https://via.placeholder.com/300x200',
      required: true
    },
    {
      key: 'alt',
      label: '图片描述',
      type: 'string',
      defaultValue: '图片描述',
      required: false
    },
    {
      key: 'fit',
      label: '填充方式',
      type: 'select',
      defaultValue: 'cover',
      options: [
        { label: '填充', value: 'fill' },
        { label: '包含', value: 'contain' },
        { label: '覆盖', value: 'cover' },
        { label: '无', value: 'none' }
      ],
      required: false
    }
  ],
  styleSchema: [
    {
      key: 'width',
      label: '宽度',
      type: 'string',
      defaultValue: '300px',
      unit: 'px'
    },
    {
      key: 'height',
      label: '高度',
      type: 'string',
      defaultValue: '200px',
      unit: 'px'
    },
    {
      key: 'borderRadius',
      label: '圆角',
      type: 'string',
      defaultValue: '0px',
      unit: 'px'
    }
  ]
}

// 容器组件配置
export const containerWidgetMeta: IWidgetMeta = {
  type: 'container',
  name: '容器',
  icon: 'Box',
  category: '布局组件',
  description: '用于组织其他组件的容器',
  defaultProps: {
    direction: 'vertical',
    justify: 'start',
    align: 'start'
  },
  defaultStyle: {
    padding: '0px', // 取消内边距
    border: '1px dashed #e4e7ed', // 更淡的边框
    backgroundColor: '#ffffff', // 纯白背景
    minHeight: '60px',
    customCSS: '' // 添加自定义CSS属性
  },
  propSchema: [
    {
      key: 'name',
      label: '组件名称',
      type: 'string',
      defaultValue: '容器组件',
      required: true,
      description: '用于标识组件的名称'
    },
    {
      key: 'direction',
      label: '排列方向',
      type: 'select',
      defaultValue: 'vertical',
      options: [
        { label: '垂直', value: 'vertical' },
        { label: '水平', value: 'horizontal' }
      ],
      required: false
    },
    {
      key: 'justify',
      label: '主轴对齐',
      type: 'select',
      defaultValue: 'start',
      options: [
        { label: '开始', value: 'start' },
        { label: '居中', value: 'center' },
        { label: '结束', value: 'end' },
        { label: '两端对齐', value: 'space-between' }
      ],
      required: false
    },
    {
      key: 'align',
      label: '交叉轴对齐',
      type: 'select',
      defaultValue: 'start',
      options: [
        { label: '开始', value: 'start' },
        { label: '居中', value: 'center' },
        { label: '结束', value: 'end' },
        { label: '拉伸', value: 'stretch' }
      ],
      required: false
    }
  ],
  styleSchema: [
    {
      key: 'padding',
      label: '内边距',
      type: 'string',
      defaultValue: '0px', // 取消内边距
      unit: 'px'
    },
    {
      key: 'backgroundColor',
      label: '背景颜色',
      type: 'color',
      defaultValue: '#ffffff' // 从 #fafafa 改为 #ffffff
    },
    {
      key: 'border',
      label: '边框',
      type: 'string',
      defaultValue: '1px dashed #e4e7ed' // 更淡的边框
    },
    {
      key: 'minHeight',
      label: '最小高度',
      type: 'string',
      defaultValue: '60px',
      unit: 'px'
    }
  ]
}

// 组件库配置 - 支持按需加载
export const widgetLibrary: IWidgetMeta[] = [
  textWidgetMeta,
  buttonWidgetMeta,
  imageWidgetMeta,
  containerWidgetMeta
]

// 按分类组织组件 - 支持懒加载
export const widgetCategories = {
  '基础组件': [textWidgetMeta, buttonWidgetMeta],
  '媒体组件': [imageWidgetMeta],
  '布局组件': [containerWidgetMeta]
}

// 组件懒加载配置
export const widgetLazyLoadConfig = {
  // 基础组件 - 立即加载
  immediate: ['text', 'button'],
  // 媒体组件 - 延迟加载
  lazy: ['image'],
  // 布局组件 - 延迟加载
  deferred: ['container']
}

// 组件优先级配置 - 用于智能预加载
export const widgetPriority = {
  'text': 1,      // 最高优先级
  'button': 1,    // 最高优先级
  'image': 2,     // 中等优先级
  'container': 3  // 低优先级
}

// 组件包大小估算（KB）
export const widgetSizeEstimate = {
  'text': 2,
  'button': 3,
  'image': 5,
  'container': 2
} 